<template>
    <nav class="ui inverted attached segment m-shadow-small m-padding-0-important">
        <div class="ui container">
            <div class="ui inverted secondary stackable menu  m-padding-0-important">
                <h3 class="ui teal header item" style="padding-left: 0px !important">Blog</h3>
                <router-link class="m-item item m-mobile-hide " to="/index">
                    <div><i class=" home icon"></i>首页</div>
                </router-link>
                <router-link class="m-item item m-mobile-hide " to="/types">
                    <div><i class=" idea icon"></i>分类</div>
                </router-link>
                <router-link class="m-item item m-mobile-hide " to="/tags">
                    <div><i class=" tags icon"></i>标签</div>
                </router-link>
                <router-link class="m-item item m-mobile-hide " to="/archives">
                    <div><i class=" clone icon"></i>归档</div>
                </router-link>
                <router-link class="m-item item m-mobile-hide " to="/about">
                    <div><i class=" info icon"></i>关于我</div>
                </router-link>
                <div class="right m-item item m-mobile-hide">
                    <div class=" ui inverted icon transparent m-mobile-search input">
                        <input type="text" placeholder="搜索.....">
                        <i class="search inverted teal link icon"></i>
                    </div>

                </div>
            </div>
        </div>
        <div class="ui menu toggle black icon button m-right-top m-mobile-show" style="margin-top: 4px !important; margin-right: 14px !important;">
            <i class="sidebar icon"></i>
        </div>
    </nav>
</template>
<script>
    export default {
        data() {
            return {}
        },
        mounted() {
            // 导航菜单
            $(this.$el).find('.menu.toggle').click(function () {
                $('.m-item').toggleClass('m-mobile-hide');
            })

            // 控制类别下拉菜单
            $(this.$el).find('.ui.dropdown').dropdown({
                on: "hover"
            })
        }
    }
</script>
<style scoped>
nav {
    border: none !important;
}

</style>
